@import './variables.scss';

$drag-item-height-st: 100px;

.drag-container {
  min-height: 1rem;


  @media screen and (max-width: 519px) {
    .fty-col-mini-12 {
      width: 100%;
    }
  }
  @media screen and (min-width: 520px) {
    .fty-col-520-12 {
      width: 50%;
    }
  }
  @media screen and (min-width: 768px) {
    .fty-col-sm-8 {
      width: 33.333334%;
    }
  }
  @media screen and (min-width: 992px) {
    .fty-col-md-6 {
      width: 25%;
    }
    .fty-col-md-8 {
      width: 33.3333%;
    }
    .fty-col-md-10 {
      width: 41.6666%;
    }
    .fty-col-md-12 {
      width: 50%;
    }
  }

  @media screen and (min-width: 1200px) {
    .fty-col-lg-6 {
      width: 25%;
    }
    .fty-col-lg-8 {
      width: 33.3333%;
    }
    .fty-col-lg-10 {
      width: 41.6666%;
    }
    .fty-col-lg-12 {
      width: 50%;
    }
  }

  @media screen and (min-width: 1500px) {
    .fty-col-lg2-6 {
      width: 25%;
    }
    .fty-col-lg2-8 {
      width: 33.3333%;
    }
    .fty-col-lg2-10 {
      width: 41.6666%;
    }
    .fty-col-lg2-12 {
      width: 50%;
    }
  }

  @media screen and (min-width: 1920px) {
    .fty-col-xl-4 {
      width: 16.66667%;
    }
  }
}

.drag-item {
  outline: none;
  user-select: none;

  &.draggable-source--is-dragging {
    opacity: .2;
  }
  &.draggable-mirror {
    z-index: 1030;
    > .fty-card {
      transform: rotateZ(-3deg);
    }
  }

  &.foradd {
    filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
  }

  .drag-card {

    height: $drag-item-height-st;
  }

  .drag-charts {
    height: $drag-item-height-st * 5.3;
  }


  .button-close, button-add {
    z-index: 99;
    background-color: #e0eafc;
    border: 1px solid #96abe5;
    color: #96abe5;
    position: absolute; top: 0px;
    right:0px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    &:hover {
      border-color: #2c7be5;
      color: inherit;
    }
  }
}



